<template>
	<view :style="{display: visible ? 'block' : 'none' }">
		<scroll-view
		    scroll-y
		    @scrolltolower="onreachBottom"
		    :refresher-enabled="true"
		    :refresher-triggered="isrefresh"
		    @refresherrefresh="onRefresh"
		    @scroll="onScroll"
		    :scroll-top="scrollTop"
		    :style="'height:' + scrollView + 'px!important'">
			<view class="content">
				<view class="navbar">
					<view v-for="(item, index) in headorderList" :key="index" class="nav-item"
						:class="{current: tabCurrentIndex === index}" @click="tabClick(item,index)">
						{{item.text}}
					</view>
				</view>
				<view v-for="(item,index) in receivingNoteList" :key="index" class="order-item" v-if="statu==0" @click="handlerClick(item)">
					<view class="wrapper" >
						<view class="box">
							<text class="name">商品名称：{{item.itemList[0].commodity.commodityName}} </text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in takeDeliveryList" :key="index" class="order-item" v-if="statu==1" @click="handlerClicks(item)">
					<view class="wrapper" >
						<view class="box">
							<text class="name">商品名称：{{item.itemList[0].commodity.commodityName}} </text>
						</view>
					</view>
				</view>
				<view class="example-body" v-if="hasnext">
					<uni-load-more :status="status" :content-text="contentText"/>
				</view>
			</view>                    
		</scroll-view>
	</view>
</template>
<script>
	import {getReceivingNoteList,getTakeDeliveryList} from "@/server/headorder.js"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		props: {
			visible: Boolean
		},
        components: {
            uniLoadMore
        },
		data() {
			return {
				params: {
					page: 1,
					limit: 10,
				},
				loading: false,
				tabCurrentIndex: 0,
				itemList:[],
				receivingNoteList: [],
				takeDeliveryList: [],
				statu:0,
				headorderList: [{
					state: 2,
					text: '待收货',
					loadingType: 'more',
                    receivingNoteList: [
					]
				},
				{
					state: 3,
					text: '待取货',
					loadingType: 'more',
                    takeDeliveryList: []
				}],
				status: 'more',
				hasnext:true,
				contentText: {
				    contentdown: '上拉加载更多',
				    contentrefresh: '加载中',
				    contentnomore: '无更多数据'
				},
				scrollView: '611',
				isrefresh: false,
				_isrefresh: false,
				scrollTop: 0,
				old: {
				    scrollTop: 0
				}
			}
		},
		//上拉加载
		onReachBottom(){
			console.log('上拉加载')
			if (this.status == 'noMore'){
				return;
			}
			this.page ++;
			this.getHeadorderList(state)
		},
		created() {
			this.getHeadorderList(2)
		},
		methods: {
			//下拉刷新
			onRefresh() {
		        if (this._isrefresh) return;
		        this._isrefresh = true;
		        if (!this.isrefresh)
		        //界面下拉触发，triggered可能不是true，要设为true
		        this.isrefresh = true;
		        setTimeout(() => {
		            this.isrefresh = false; //触发onRestore，并关闭刷新图标
		            this._isrefresh = false;
		        }, 1000);
				// 重新加载数据
		        if (this.swiperCurrent == 0) {
		            this.$refs.childZero[0].serachTap();
		        } else if (this.swiperCurrent == 1) {
		            this.$refs.childOne[0].serachTap();
		        }
		    },
			getHeadorderList(state) {
				if(state==2){
					uni.showLoading({
						title: "加载中"
					})
					getReceivingNoteList(this.params).then(data => {
						uni.hideLoading()
						console.log("---------")
						this.receivingNoteList = data.list
						console.log(this.receivingNoteList)
						}).catch((data) => {
					}).catch((data) => {
						uni.hideLoading()
						this.$api.msg(data);
					})
				}else if(state==3){
					uni.showLoading({
						title: "加载中"
					})
					getTakeDeliveryList(this.params).then(data => {
						uni.hideLoading()
						this.takeDeliveryList = data.list
						// this.itemList = this.takeDeliveryList.list
						// this.itemlist=this.itemList[0]
					}).catch((data) => {
						uni.hideLoading()
						this.$api.msg(data);
					})
				}
			},
			//获取订单列表
			loadData(source) {
					this.headorderList = Json.headorderList
					//这里是将订单挂载到tab列表下
					let index = this.tabCurrentIndex;
					let navItem = this.headorderList[index];
					let state = navItem.state;
					if (source === 'tabChange' && navItem.loaded === true) {
						//tab切换只有第一次需要加载数据
						return;
					}
					if (navItem.loadingType === 'loading') {
						//防止重复加载
						return;
					}
					navItem.loadingType = 'loading';
			},
            //swiper 切换
            changeTab(e) {
                this.tabCurrentIndex = e.target.current;
                this.loadData('tabChange');
            },
            //顶部tab点击
            tabClick(item, index) {
				this.statu=index;
				if(index==0){
					this.receivingNoteList=[];
				}else if(index==1) {
					this.takeDeliveryList=[];
				}
				this.getHeadorderList(item.state);
				console.log(item);
				console.log(index)

                 this.tabCurrentIndex = index;
            },
			handlerClick(item){
			    console.log(item)
			    uni.navigateTo({
			        url:'../headorder/receiving?receivingNote=' + encodeURIComponent(JSON.stringify(
						item))
			    })
			},
			handlerClicks(item){
			    console.log(item)
			    uni.navigateTo({
			        url:'../headorder/pickup?takeDelivery=' + encodeURIComponent(JSON.stringify(
						item))
			    })
			},
			//点击查看更多触发事件
			clickLoadMore(e) {
			    console.log('加载更多')
			}
		}
	}
</script>
<style lang="scss">
    page,
    .content {
        background: $page-color-base;
        height: 100%;
    }

    .wrapper {
    	display: flex;
    	flex-direction: column;
    	flex: 1;
    }

    .box {
    	display: flex;
    	align-items: center;

    	.tag {
    		font-size: 24upx;
    		color: $base-color;
    		margin-right: 10upx;
    		background: #fffafb;
    		border: 1px solid #ffb4c7;
    		border-radius: 4upx;
    		padding: 4upx 10upx;
    		line-height: 1;
    	}

    	.name {
    		font-size: 30upx;
    		color: $font-color-dark;
    	}
    }

    .navbar {
        display: flex;
        height: 40px;
        padding: 0 5px;
        background: #fff;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .06);
        position: relative;
        z-index: 10;

        .nav-item {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-size: 15px;
            color: $font-color-dark;
            position: relative;

            &.current {
                 color: $base-color;

                &:after {
                     content: '';
                     position: absolute;
                     left: 50%;
                     bottom: 0;
                     transform: translateX(-50%);
                     width: 44px;
                     height: 0;
                     border-bottom: 2px solid $base-color;
                }
            }
        }
    }
    .uni-swiper-item {
        height: auto;
    }

    .order-item {
        display: flex;
        flex-direction: column;
        padding-left: 30upx;
        background: #fff;
        margin-top: 16upx;

        .i-top {
            display: flex;
            align-items: center;
            height: 80upx;
            padding-right: 30upx;
            font-size: $font-base;
            color: $font-color-dark;
            position: relative;

            .time {
                flex: 1;
            }

            .state {
                color: $base-color;
            }

            .del-btn {
                padding: 10upx 0 10upx 36upx;
                font-size: $font-lg;
                color: $font-color-light;
                position: relative;

                &:after {
                    content: '';
                    width: 0;
                    height: 30upx;
                    border-left: 1px solid $border-color-dark;
                    position: absolute;
                    left: 20upx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
    @-webkit-keyframes load {
        0% {
            opacity: 1
        }

        100% {
            opacity: .2
        }
    }
</style>
